<template>
  <div>
    <el-dialog title="上传文件" :close-on-click-modal="false" :visible.sync="dialogVisible" width="40%" :lock-scroll="false" v-dialogDrag
      :before-close="close" append-to-body>
      <el-form ref="ruleFormRef" class="el-form-no" :label-width="allData.labelWidth">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="allData.uploadLabel" prop="name">
              <el-upload ref="uploadRef" class="upload-demo" action="#" multiple :on-change="handleChangeList" :auto-upload="false"
                :on-exceed="handleExceedList" :accept="allData.accept" :on-remove="handleRemove" :file-list="fileList">
                <el-button size="small" type="primary">选择文件</el-button>
                <span slot="tip" class="el-upload__tip">
                  请选择doc、.DOC、.docx、.DOCX、.wps、.WPS格式的文件
                </span>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="close">取消</el-button>
        <el-button :loading="loading" size="small" type="primary" :disabled="fileList.length == 0" @click="saveList">
          下一步
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    isChangeUpload: {
      type: Boolean,
      default: false,
    },
    importData: {
      type: Object,
      default: () => { },
    },
    allData: {
      type: Object,
      default: () => {
        return {
          placeholderString: "选择导入文件",
          labelWidth: "120px",
          downloadText: "下载模板",
          ifDownload: false,
          accept: "",
        };
      },
    },
  },
  data() {
    return {
      dialogVisible: true,
      loading: false,
      fileList: [],
    };
  },
  methods: {
    download() {
      this.$emit("download");
    },
    isCanUpload(fileList) {
      let array = this.allData.accept;
      let arrList = [];
      fileList.forEach((file) => {
        let fileEnd = file.name.substring(file.name.lastIndexOf("."));
        if (array.includes(fileEnd)) {
          arrList.push(file);
        }
      });
      this.fileList = arrList;
    },
    // 多文件上传
    handleChangeList(file, fileList) {
      // this.fileList = fileList;
      this.isCanUpload(fileList);
    },
    //删除
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    // 多次上传覆盖
    handleExceedList(file, fileList) {
      this.$refs.uploadRef.clearFiles();
      // this.fileList = fileList;
      this.isCanUpload(fileList);
    },
    close() {
      this.fileList = [];
      this.loading = false;
      this.$emit("closeDialog");
    },
    saveList() {
      this.$emit("importFileFun", this.fileList);
    },
    changeLoading() {
      this.loading = !this.loading;
    },
  },
};
</script>

<style lang="less" scoped>
  .dialog-footer {
    text-align: center;
  }

  :deep(.el-descriptions-item__label.is-bordered-label) {
    width: 180px;
  }
  :deep(.scrollbar-box) {
    height: 400px;
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  :deep(.el-descriptions-row) {
    vertical-align: baseline;
  }
  :deep(.el-form-no) {
    .el-upload-list {
      max-height: 50vh;
      overflow-y: scroll;
    }
  }
</style>
